<template>
  <div class="oe-answer-card" style="transform: translateZ(0);">
    <a-anchor :showInkInFixed="false" @click="handleClick">
      <div class="oe-answer-container">
        <div class="oe-answer-title">
          答题卡
        </div>
        <template>
          <!-- <div class="oe-answer-question__item" v-if="question.children.length" :key="index"> -->
          <!-- <div class="oe-answer-item__title">
              {{ `${question.questionType}(共${question.children.length}题，合计${question.totalScore}分)` }}
            </div> -->
          <div class="oe-answer-list">
            <a-anchor-link
              v-for="(question, index) in questionList"
              :class="[
                'oe-list-number',
                !question.IsAssignmented
                ? ''
                :question.IsRight == 1
                  ? 'right-color'
                  : question.IsRight == 2
                  ? 'wrong-color'
                  : question.IsRight == 3 && (type == 'right' || type == 'result')
                  ? 'half-color'
                  : ''
              ]"
              :href="`#Ti-${index + 1}`"
              :title="index + 1"
              :key="index + 1"
            />
          </div>
          <!-- </div> -->
        </template>

        <div class="oe-awswer-type">
          <span class="answer-type-item" v-if="type == 'right' || 'result'">
            未批
          </span>
          <span class="answer-type-item answer-right">
            正确
          </span>
          <span class="answer-type-item answer-wrong">
            错误
          </span>
          <span class="answer-type-item answer-half" v-if="type == 'right' || 'result'">
            半对
          </span>
        </div>
      </div>
      <div class="oe-answer-time" v-if="type == 'result'">
        <span class="title">得分:</span>
        <span>{{ totalScore }}</span>
        <span class="title" v-if="examScore > 0">(异常扣分：{{ examScore }}分)</span>
      </div>
      <!-- <div class="oe-answer-export clearfix">
        
      </div> -->
      <div class="oe-answer-btn clearfix">
        
        <a-button type="primary" v-if="type != 'read' && type != 'right'" class="fr" @click="getWordSave">word导出</a-button>
        <a-button type="primary" v-if="type != 'read' && type != 'right'" class="fr" @click="savePdf">导出</a-button>
        <a-button type="primary" v-if="type != 'read' && type != 'right'" class="fr" @click="savePdfBatch"
          >批量导出</a-button
        >
        <a-button type="primary" v-if="type != 'read' && type != 'right' && resUltType == 2" class="fr" @click="backExam">退回重批</a-button>
        <a-button type="primary" v-if="type != 'read' && type != 'right' && (resUltType == 2 || resUltType == 1) " class="fr" @click="returnDo">退回重做</a-button>
        <!-- <a-button
          type="primary"
          v-if="type != 'read' && type != 'right'"
          class="fr"
          @click="printPdf()"
          style="margin-right:10px;"
          >打印</a-button
        > -->
        <!-- <a-button type="primary" class="fr" @click="printPdfBatch()" style="margin-right:10px;">批量打印</a-button> -->
        <!-- <a-button type="primary" @click="btnAction('print')">打印试卷</a-button> -->
        <a-button type="primary" @click="visableAnswerction" v-if="type == 'read' && type !== 'result' && synchronizedAnswers == 1" >{{
          text
        }}</a-button>
        <a-button type="primary" v-if="type == 'read' && type !== 'result' &&  synchronizedAnswers == 1" @click="setSavePrint"
          >设置导出试卷</a-button
        >
        <a-button type="primary" v-if="type == 'right' && showNext && type !== 'result'" @click="btnAction('next')"
          >批阅下一个</a-button
        >
        <a-button type="primary" v-if="type == 'right' && !showNext && type !== 'result' && Submit" @click="btnAction('submit')"
          >提交批阅</a-button
        >
      </div>
    </a-anchor>
  </div>
</template>

<script>
export default {
  name: 'answerCard',
  props: {
    showNext: {
      type: Boolean,
      default: false
    },
    // read预览，right批阅 result // 没有操作
    type: {
      type: String,
      default: 'read'
    },
    checkType: {
      type: Number,
      default: 1
    },
    resUltType: {
      type: Number,
      default: 0
    },
    answerCardTop: {
      type: Number,
      default: 0,
    },
    batchid: {
      type: String,
      default: ''
    },
    examid: {
      type: String,
      default: ''
    },
    workExamStuId: {
      type: String,
      default: ''
    },
    stuIdlis: {
      type: String,
      default: ''
    },
    stuid: {
      type: String,
      default: ''
    },
    totalScore: {
      type: [String, Number],
      default: ''
    },
    examScore: {
      type: Number,
      default: 0
    },
    Submit: {
      type: Boolean,
      default: true
    },
    structId: {
      type: String,
      default: ''
    },
    synchronizedAnswers:{
      type: Number,
      default: 1
    },
    questionList: {
      type: [Array, Object],
      default() {
        return [
          {
            questionType: '单选题',
            totalScore: 40,
            children: [1, 3, 5],
            noAnswer: [],
            rightAnswer: [],
            wrongAnswer: [],
            halfAnswer: []
          }
        ];
      }
    }
  },
  data() {
    return {
      visableAnswer: true,
      struct: '',
      scrollTop: 0,
      tabOffsetTop: 0,
    };
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  mounted() {
    this.struct = this.structId;
    let tabEle = document.getElementsByClassName('oe-answer-card')[0].firstChild.firstChild;
    this.tabOffsetTop = tabEle.offsetTop;
    window.addEventListener('scroll', this.handleScroll);
  },
  computed: {
    text() {
      if (this.visableAnswer) {
        return '显示答案';
      } else {
        return '隐藏答案';
      }
    }
  },
  methods: {
    visableAnswerction() {
      this.visableAnswer = !this.visableAnswer;
      let val = this.visableAnswer ? 'hideAnswer' : 'showAnswer';
      this.btnAction(val);
    },
    btnAction(val) {
      this.$emit('getBtnAction', val);
    },
    chrchr(e) {
      this.struct = e;
    },
    setSavePrint() {
      // this.$parent.setSavePrint();
      if (this.checkType == 0) {
        this.$message.warning('还未审核通过');
      } else if (this.checkType == 1) {
        this.$router.push({
          name: 'examWord',
          params: {
            examId: this.examid,
            batchid: this.batchid,
            structId: this.struct
          }
        });
      } else {
        this.$message.error('审核未通过');
      }
      
    },
    getWordSave() {
      let name = ''
      if(this.$route.name === 'studentExamDetail'){
        name = 'stuWordHtml'
      }else if(this.$route.name === 'studentExamDetailOne'){
        name = 'stuWordHtmlOne'
      }else if(this.$route.name === 'studentExamDetail2'){
        name = 'stuWordHtml2'
      }else if(this.$route.name === 'studentExamDetail3'){
        name = 'stuWordHtml3'
      }else if(this.$route.name === 'studentExamDetail4'){
        name = 'stuWordHtml4'
      }
      this.$router.push({
        name,
        params: {
          examid: this.examid,
          stuid: this.stuIdlis,
          type: this.resUltType,
          batchid: this.batchid
        }
      });
    },
    handleClick(e, link) {
      e.preventDefault();
    },
    savePdf() {
      this.$parent.savePdf();
    },
    savePdfBatch() {
      this.$parent.savePdfBatch();
    },
    printPdf() {
      this.$parent.printPdf();
    },
    printPdfBatch() {
      this.$parent.printPdfBatch();
    },
    backExam() {
      this.$confirm({
              title: '提示',
              content: '确定要退回重批该学生的作答记录吗？退回后，批阅教师可以再次进行批阅',
              centered: true,
              onOk: () => {
                this.$http
                  .post('/api/design/marking/backExam', {
                    workExamStuId: this.workExamStuId
                  })
                  .then((res) => {
                    var that = this;
                    if (res.code > 0) {
                      this.$message.success(res.msg);
                      this.$router.push({
                        name: 'approvaledList',
                        params: {
                          batchid: that.batchid,
                          examid: that.examid
                        }
                      });
                    } else {
                      this.$message.error(res.msg);
                      // this.$router.push({
                      //   name: 'approvaledList',
                      //   params: {
                      //      batchid: that.batchid,
                      //      examid: that.examid
                      //   }
                      // });
                    }
                  });
              }
        });
    },
    returnDo() {
       this.$confirm({
              title: '提示',
              content: '确定要退回重做该学生的作答记录吗？退回后，学生在作答时间内可以再次进行作答',
              centered: true,
              onOk: () => {
                this.$http
                  .post('/api/design/marking/returnDo', {
                    workExamStuId: this.workExamStuId
                  })
                  .then((res) => {
                    var that = this;
                    if (res.code > 0) {
                      this.$message.success(res.msg);
                      if(this.resUltType == 2){
                      this.$router.push({
                        name: 'approvaledList',
                        params: {
                          batchid: that.batchid,
                          examid: that.examid
                        }
                      });
                      }else{
                        this.$router.push({
                        name: 'notApprovaledList',
                        params: {
                          batchid: that.batchid,
                          examid: that.examid
                        }
                      });
                      }
                    } else {
                      this.$message.error(res.msg);
                      // this.$router.push({
                      //   name: 'approvaledList',
                      //   params: {
                      //      batchid: that.batchid,
                      //      examid: that.examid
                      //   }
                      // });
                    }
                  });
               }
        });
    },
    handleScroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        document.scrollingElement.scrollTop ||
        0;
      if (this.scrollTop - 20 > this.tabOffsetTop) {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let tabEle = document.getElementsByClassName('oe-answer-card')[0].firstChild.firstChild;
        if (this.answerCardTop != 0) {
          tabEle.style.top = (scrollTop-this.answerCardTop) + 'px';
        } else {
          tabEle.style.top = (scrollTop-130) + 'px';
        }
        
      }
    }
  }
};
</script>
